<template>
  <div>
    <!-- ul导航 -->
    <ul class="nav">
      <slot></slot>
    </ul>
    <!-- <p>{{ currentIndex }}</p> -->
    <!-- 内容 -->
    <div class="content">
      <Content :contentArr="contentArr"></Content>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import Content from "./Content.vue";
export default {
  name: "Tabs",
  components: {
    Content,
  },
  props: {
    currentIndex: {
      type: [String, Number],
      default: 1,
    },
  },

  // 定义属性
  data() {
    return {
      contentArr: [],
    };
  },
  methods: {
    //   用于Tab子组件调用，修改currentIndex的值
    changePindex(n) {
      console.log("====", n);
      this.$emit("changeTab", n);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  //进入页面--获取slot插槽里面的数据  数据接收后 传递给content组件
  beforeMount() {
    console.log(this.$slots.default);
    this.contentArr = this.$slots.default;
  },
};
</script>

<style scoped>
.nav {
  display: flex;
  list-style: none;
}
.nav li {
  flex: 1;
  text-align: center;
  padding-bottom: 10px;
  padding-top: 10px;
}
.nav .active {
  color: red;
  border-bottom: 2px solid red;
}
</style>
